<!-- 登录界面 -->
<template>
  <!-- 背景装饰元素 -->
  <div class="fixed inset-0 bg-grid opacity-50 z-0"></div>

  <!-- 顶部导航 -->
  <header class="site-header">
    <div class="container">
      <div class="header-content">
        <div class="logo">
          <i class="fa-solid fa-flask logo-icon"></i>
          <h1 class="logo-text">IPSS课题组</h1>
        </div>
        <nav class="main-nav">
          <ul>
            <li>
              <a
                href="#"
                class="transition-colors"
                @click="$router.push('/home')"
                >首页</a
              >
            </li>
            <li><a href="#" class="active">成员登录</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

  <main class="main-content">
    <div class="login-container">
      <!-- 装饰元素 -->
      <div class="decorative-element decorative-left">
        <i class="fa-solid fa-dna text-primary"></i>
      </div>
      <div class="decorative-element decorative-right">
        <i class="fa-solid fa-microscope text-primary"></i>
      </div>

      <!-- 登录卡片 -->
      <div class="login-card">
        <!-- 卡片头部 -->
        <div class="card-header">
          <div class="card-icon-container">
            <i class="fa-solid fa-user-graduate card-icon"></i>
          </div>
          <h2 class="card-title">成员登录</h2>
          <p class="card-subtitle">欢迎回来，IPSS课题组成员</p>
        </div>

        <!-- 登录表单 -->
        <div class="card-body">
          <form id="loginForm" class="login-form">
            <div class="form-group">
              <label for="username" class="form-label">用户名</label>
              <div class="input-group">
                <i class="fa-solid fa-user input-icon"></i>
                <input
                  type="text"
                  id="username"
                  name="username"
                  class="form-control"
                  placeholder="请输入您的用户名"
                  v-model:="username"
                  required
                />
              </div>
            </div>

            <div class="form-group">
              <label for="password" class="form-label">密码</label>
              <div class="input-group">
                <i class="fa-solid fa-lock input-icon"></i>
                <input
                  type="password"
                  id="password"
                  name="password"
                  class="form-control"
                  placeholder="请输入您的密码"
                  v-model:="password"
                  required
                />
                <button
                  type="button"
                  id="togglePassword"
                  class="toggle-password"
                >
                  <i class="fa-solid fa-eye-slash"></i>
                </button>
              </div>
            </div>

            <div class="form-options">
              <div class="remember-me">
                <input id="remember-me" name="remember-me" type="checkbox" />
                <label for="remember-me">记住我</label>
              </div>
              <div>
                <a href="#" class="forgot-password">忘记密码?</a>
              </div>
            </div>

            <button type="button" class="btn btn-primary" @click="loginAdmin()">
              <span>登录</span>
              <i class="fa-solid fa-arrow-right"></i>
            </button>
          </form>

          <div class="card-footer">
            <p>不是课题组成员? <a href="#">联系管理员</a></p>
          </div>
        </div>
      </div>
    </div>
  </main>

  <footer class="site-footer">
    <div class="container">
      <div class="footer-content">
        <div class="footer-logo">
          <i class="fa-solid fa-flask footer-logo-icon"></i>
          <span>IPSS课题组</span>
        </div>
        <div class="footer-copyright">&copy IPSS课题组 版权所有</div>
        <div class="social-links">
          <a href="#" class="transition-colors">
            <i class="fa-brands fa-github"></i>
          </a>
          <a href="#" class="transition-colors">
            <i class="fa-brands fa-google-scholar"></i>
          </a>
          <a href="#" class="transition-colors">
            <i class="fa-solid fa-envelope"></i>
          </a>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
import { ref } from "vue";
import router from "@/router";
import api from "@/utils/api";
import { ElMessage } from "element-plus";

const username = ref(""); // 实际对应 student_id
const password = ref("");

// 登录函数
const loginAdmin = async () => {
  try {
    const res = await api.post("/login", {
      student_id: username.value, // ⚡ 对应后端 student_id
      password: password.value,
    });

    if (res.data.code === 200) {
      // 登录成功

      // 可选：把用户信息存储到 localStorage
      // localStorage.setItem("user", JSON.stringify(res.data.data));

      localStorage.setItem("student_id", res.data.data.student_id);
      // 登录成功后存储
      localStorage.setItem("token", res.data.data.token);
      localStorage.setItem("role", res.data.data.role);
      ElMessage({
        message: "登录成功",
        type: "success",
        plain: true,
      });
      // 跳转到管理员页面;
      router.push({ name: "AdminPage" });
    }
  } catch (err) {
    // 失败处理
    const msg = err.response?.data?.msg || "登录失败，请检查账号和密码";
    alert(msg);
    console.error("登录失败:", msg);
  }
};
</script>

<style scoped>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  scroll-behavior: smooth;
  background-color: #f5f7fa;
  color: #333;
  min-height: 100vh;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 自定义动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

/* 背景网格 */
.bg-grid {
  background-size: 40px 40px;
  background-image: linear-gradient(
      to right,
      rgba(22, 93, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(22, 93, 255, 0.05) 1px, transparent 1px);
}

/* 头部样式 */
.site-header {
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 30;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-icon {
  color: #165dff;
  font-size: 24px;
}

.logo-text {
  font-size: 20px;
  font-weight: bold;
  color: #0a2463;
}

.main-nav ul {
  display: flex;
  gap: 24px;
  list-style: none;
}

.main-nav a {
  text-decoration: none;
  color: #4e5969;
  transition: color 0.3s ease;
}

.main-nav a:hover {
  color: #165dff;
}

.main-nav a.active {
  color: #165dff;
  font-weight: 500;
}

/* 主内容区样式 */
.main-content {
  padding: 64px 0;
  position: relative;
  z-index: 10;
}

.login-container {
  max-width: 400px;
  margin: 0 auto;
  position: relative;
}

.login-card {
  background-color: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  animation: fadeIn 0.6s ease-out forwards;
}

.login-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.card-header {
  background: linear-gradient(to right, #165dff, #4080ff);
  padding: 32px;
  text-align: center;
  color: white;
}

.card-icon-container {
  width: 64px;
  height: 64px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.card-icon {
  color: #165dff;
  font-size: 28px;
}

.card-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 4px;
}

.card-subtitle {
  opacity: 0.9;
  font-size: 14px;
}

.card-body {
  padding: 32px;
}

/* 表单样式 */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #4e5969;
}

.form-control {
  width: 100%;
  padding: 12px 10px 12px 38px;
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-size: 14px;
}

.form-control:focus {
  outline: none;
  border-color: #165dff;
  box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.2);
}

.input-group {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
}

.remember-me input {
  width: 16px;
  height: 16px;
  accent-color: #165dff;
}

.remember-me label {
  font-size: 14px;
  color: #4e5969;
}

.forgot-password {
  font-size: 14px;
  color: #165dff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.forgot-password:hover {
  color: #0a2463;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  font-size: 14px;
}

.btn-primary {
  background-color: #165dff;
  color: white;
  width: 100%;
}

.btn-primary:hover {
  background-color: #0a2463;
}

.card-footer {
  padding: 24px;
  border-top: 1px solid #eee;
  text-align: center;
}

.card-footer p {
  font-size: 14px;
  color: #666;
}

.card-footer a {
  color: #165dff;
  text-decoration: none;
  font-weight: 500;
}

.card-footer a:hover {
  color: #0a2463;
}

/* 装饰元素 */
.decorative-element {
  display: none;
  position: absolute;
  width: 160px;
  height: 160px;
  opacity: 0.1;
  font-size: 120px;
}

@media (min-width: 768px) {
  .decorative-element {
    display: block;
  }

  .decorative-left {
    top: -40px;
    left: -40px;
  }

  .decorative-right {
    bottom: -40px;
    right: -40px;
  }
}

/* 页脚样式 */
.site-footer {
  background-color: #0a2463;
  color: white;
  padding: 32px 0;
  margin-top: 64px;
  position: relative;
  z-index: 10;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

@media (min-width: 768px) {
  .footer-content {
    flex-direction: row;
  }
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-logo-icon {
  color: #165dff;
}

.footer-copyright {
  font-size: 14px;
  color: #999;
}

.social-links {
  display: flex;
  gap: 16px;
}

.social-links a {
  color: #999;
  transition: color 0.3s ease;
}

.social-links a:hover {
  color: white;
}
</style>
